Joomla/C2/Formatting-article-in-Joomla/English - Revision history

Nirmala Venkat at 05:48, 25 February 2016

2016-02-25T05:48:42Z

Nirmala Venkat at 05:45, 25 February 2016

2016-02-25T05:45:02Z

Nancyvarkey at 05:52, 12 February 2016

2016-02-12T05:52:22Z

Itspriyanka at 11:09, 8 February 2016

2016-02-08T11:09:35Z

Itspriyanka at 10:36, 8 February 2016

2016-02-08T10:36:24Z

Itspriyanka at 07:48, 8 February 2016

2016-02-08T07:48:34Z

Itspriyanka: Created page with "{| border=1 || '''Visual Cue''' || '''Narration''' |- || '''Show Slide 1:''' Formatting Articles in Joomla. || Welcome to the Spoken Tutorial on '''Basic Formatting of Articl..."

2016-02-01T09:46:26Z

Created page with "{| border=1 || '''Visual Cue''' || '''Narration''' |- || '''Show Slide 1:''' Formatting Articles in Joomla. || Welcome to the Spoken Tutorial on '''Basic Formatting of Articl..."

New page

{| border=1
|| '''Visual Cue'''
|| '''Narration'''

|-
|| '''Show Slide 1:'''
Formatting Articles in Joomla.
|| Welcome to the Spoken Tutorial on '''Basic Formatting of Articles in Joomla.'''

|-
|| '''Show Slide 2'''
Learning Objectives:
Same as narration
|| In this tutorial, we will learn about:

*'''Article''' editor in '''Joomla.'''
*Basic formatting for an '''article'''
*And styling an '''article''' text

|-
|| '''Show Slide 3'''
Learning Objectives continued:
Same as narration
|| We will also learn how to:

*Insert '''lists'''
*Insert a '''page break''' and
*Insert '''Read More''' link in articles.

|-
|| '''Show Slide 4'''
'''Versions and OS'''

|| 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

|-
|| '''Show Slide 5'''
'''Prerequisites'''

|| To follow this tutorial:
*You should know how to create '''articles''' in '''Joomla'''
*If not, check the relevant '''Joomla''' tutorials on the '''Spoken Tutorial''' website.

|-
|| '''Show Slide 6'''
Prior Knowledge

|| Earlier, we learnt to create, edit, copy and delete an '''article''' in '''Joomla'''.
Now, let’s learn how to format '''articles.'''

|-
|| Switch to the browser with '''Joomla Control Panel''' open.

|| Let’s switch to the '''Joomla control panel.'''

|-
|| Click on '''Article Manager'''
|| Click on '''Article Manager. '''
Here are the articles we created earlier:
'''*“Benefits of Sodium”''' and
'''*“Vitamin A”'''

|-
||

|| Let us view them on the '''Digital India''' webpage.

|-
|| Click on '''Digital India'''

|| Click on '''Digital India''' at the top right of the page.

|-
||

|| We can see both our '''articles''' here.

|-
|| Click on “Benefits of Sodium”
|| Click on '''Benefits of Sodium.'''

|-
||

|| We can see the '''article''' is not formatted.

|-
|| Click on the '''admin panel''' webpage in the browser.

Click on '''Benefits of Sodium'''

|| Let’s go back to the '''Article Manager.'''

Click on the article title '''“Benefits of Sodium”.'''

|-
|| Point to the editor

|| The editor in which we type the text of the '''article''', is called a '''WYSIWYG editor.'''

|-
|| While editing, this text can appear on the screen:
'''WYSIWYG : 'What You See Is What You Get'.'''

|| '''WYSIWYG''' is the abbreviation of ''''What You See Is What You Get'.'''

|-
||

|| It means the '''article''' looks the same in the web page as seen in the editing window.

|-
|| Point to the menu bar in the editor

|| Look at the menu bar of the editor now.

|-
|| Point to some options in the first row.

Now click on any 2 for demo

|| The first row has drop-down menus, which have various formatting options.

You can see the sub-options when you click on them.

|-
|| Point to some options in the 2nd row.

|| The second row has sets of formatting options.

|-
|| Point to each icon in the first set

|| So here, we see a set of text enhancement options like

'''Bold, Italics, Underline''' and '''Strikethrough. '''

|-
|| Point to each icon in the second set

|| Next, we see the options to align the text to the '''left, centre, right''' and '''justify'''.

|-
||

|| These work as in any other text editor.

|-
|| Point to '''Paragraph''' button

|| After the alignment options, we can see a button named '''Paragraph.'''

|-
|| Click on '''Paragraph'''

|| When we click on it, we can see various options like '''Heading 1, Heading 2''', etc.

These are pre-set options provided by '''Joomla''' for formatting purposes.

|-
||'''Show Slide 7''': Headings in Joomla

|| '''Headings''' are very useful in making text easier to read on the screen.

'''Headings''' also define the hierarchy of importance.

|-
|| Highlight '''Heading 1'''
Highlight '''Heading 6'''

|| '''Heading 1''' defines the most important heading and '''Heading 6''' is the least important.

|-
|| Switch to the '''Digital India''' webpage.

Highlight '''Home.'''

|| Switch to '''Digital India''' webpage.

Here, the text '''Home''' is in '''Heading 1.'''

|-
|| Highlight '''Benefits of Sodium'''

|| The title of an '''article''' in '''Joomla''' is in '''Heading 2.'''

|-
|| Highlight '''Main Menu, Login Form'''

|| Other headings, like '''Main Menu''' and '''Login Form''' are in '''Heading 3'''.

|-
||

|| Notice that the font size keeps decreasing with levels of '''headings.'''

|-
|| Switch back to '''Edit Article''' webpage

|| Switch to the '''Edit Article webpage.'''

|-
||

|| Let us add one section on food sources of '''Sodium.'''

|-
|| Point the cursor to the end of the '''article'''>> Press '''Enter'''.

|| At the end of the '''article''' text, click '''Enter''' to begin a new paragraph.

|-
|| Type: '''Food Sources''':
Salt
Processed Food
Canned Food

|| Type '''Food Sources:''' as the heading.

We will type 3 sources here –
'''Salt, Processed Food''' and '''Canned Food'''.

|-
|| Select '''Food Sources''' >> Click on '''Paragraph''' button>> Select '''Heading 4'''

|| Select the text '''Food Sources:''' and in the Paragraph drop-down, select '''Heading 4'''.

|-
|| Click on '''Save'''

|| Click on '''Save''' button.

|-
||Switch to the webpage and press '''F5'''

|| Switch to the '''Digital India''' webpage and refresh the page.

|-
||Highlight '''Food Sources'''

|| Notice that the text '''Food Sources''' appears in bold.

|-
|| Switch to '''Edit Article''' webpage

||Go back to '''Edit Article''' webpage.

|-
|| Type: '''Let’s look at some sources of sodium'''

||Next to the heading '''Food Sources''', add the text -
'''Let’s look at some food sources of sodium.'''

|-
|| Point to the added text

||Here, we have added the text in the same paragraph.

The newly added text becomes part of the heading and is formatted as '''Heading 4.'''

|-
||

||Please note that the:

Header formatting applies to the entire paragraph and not to particular words.

|-
|| Press '''Enter'''.

||To separate this line from the heading, press '''Enter''' before the newly added text.

|-
||Select the text >> Click on '''Paragraph''' button→ '''Paragraph'''

||Then select the text and from the '''Paragraph''' drop-down select the option '''Paragraph'''.

The text is no longer in '''Heading 4''' format.

<<PAUSE>>

|-
||Place the cursor at the top of the page >>
Type '''Chemical Symbol of Sodium is Na'''

||Let me add a text line at the top of the page:
'''“Chemical Symbol of Sodium is Na.”'''

|-
||Select the new text line. Click on '''Paragraph → Pre'''.

||Select the text line and then from the '''Paragraph''' drop-down button select '''Pre'''.

|-
||Highlight the text line

||The '''Pre''' option is for preformatted text.

Preformatted text is displayed in fixed width font, and preserves both spaces and line breaks.

|-
||Click on '''Save'''

||Click on '''Save''' button.

|-
||Switch to the '''Digital India''' webpage and press '''F5'''

||Go to the '''Digital India''' webpage and refresh it.

Notice that the newly added text appears in a grey box.

It also appears in a different font and style.

|-
||Highlight the new text line

||'''Pre''' style is usually used for text that needs to stand out in an '''article'''.

This could be poetic stanza, computer code, quotes etc.

|-
||Switch to '''Edit Article'''.

||Switch to the '''Edit Article''' webpage again.

<<PAUSE>>

|-
||Point to the list options.

||Next, we have the '''bulleted list''' and '''numbered list''' options.

Let us see how to use them.

|-
||Select the last 3 lines

||Select the last 3 line items in the '''article''' text.

|-
||Click on bulleted list >> click on '''Save''' button

||Now click on '''bullet list''' icon and then click on '''Save''' button.

|-
||Refresh the '''Homepage'''

||Refresh the '''Website''' to see the bulleted list in the '''article Benefits of Sodium'''.

<<PAUSE>>

|-
||Click on '''Edit Article''' webpage.

||Come back to the '''Edit Article''' webpage.

|-
||Point the 3rd row icons one by one.

||The third row has some advanced formatting options like:

*Decrease and increase '''indent'''
*'''Un-do''' and '''Redo'''
*'''Insert links, images, tables''', etc.
*'''Superscript, subscript and special characters'''

You can try these on your own and see how they work.

|-
||

||<<PAUSE>>

|-
||

||Let’s look at our '''article''' again.

|-
||Point to the article sections '''health benefits of sodium''' and '''sources of sodium'''

||Here we have 2 sections:
*Text about introduction of sodium and its benefits and
*'''Food Sources.'''

Let’s separate these two sections using a horizontal line.

|-
||Point the cursor before '''Sources of Sodium''' text.

Click on '''Horizontal Line''' icon.

||Keep the cursor before the text '''Food Sources'''.

Now click on the '''Horizontal Line''' icon in the formatting menu bar.

This will insert a horizontal line.

|-
||Click on Save button >> Switch to the webpage and press F5

||'''Save''' and refresh the webpage.

We can see the changes in the '''article “Benefits of Sodium”'''.

|-
||

||Instead of inserting a horizontal line, why not put these 2 sections in 2 different pages?

Let’s try doing that.

|-
||Switch to '''Edit Article''' webpage.

||Go back to the '''Edit Article''' webpage.

|-
||Click on the horizontal line >> Press '''Backspace''' key.

||First we will remove the horizontal line.

So click on it and then press the '''Backspace''' key on the keyboard.

|-
||Place the cursor at the point

||Now place the cursor at the point where we want to insert the '''Page Break'''.

|-
||Scroll down >> Locate '''Page Break''' button >> Click on it

||Scroll down and locate the '''Page Break''' button at the bottom of the editor window.

Click on it.

|-
||

||It will open an '''Insert Pagebreak''' dialog box.

|-
||'''Page Title: Sources'''

Table of Contents: Sources of Sodium

||Enter '''Sources''' as '''Page Title''' and '''Food Sources of Sodium''' as '''Table of Contents Alias'''.

|-
||Click on '''Insert Page Break''' button >> Point to the zig-zag line between the two sections.

||Click on '''Insert Page Break''' button.

You will see a zig-zag line between the two sections.

|-
||Click on '''Save''' button >> Switch to the '''Digital India''' webpage and press '''F5'''

||Click on '''Save''' button.

Switch to the '''Digital India''' webpage and refresh it.

|-
||Highlight '''Page 1 of 2.'''

||This page says '''Page 1 of 2'''.
|-
||Highlight '''Prev''' and '''Next.'''

||There are '''Prev''' and '''Next''' buttons below the '''article''' text.

|-
||Highlight block on the right.

||A new block has appeared on the right.

It helps us navigate to the various pages of the particular '''article'''.

|-
||Point to the Title in the block on the right

||The title of the 2nd page is the '''Table of Contents Alias''' we typed earlier…..

i.e. '''Food Sources of Sodium'''

|-
||Click on '''Next''' button.

||Click on the '''Next''' button.

|-
||Highlight '''Page 2 of 2'''.

||Now, the page says '''Page 2 of 2'''.

|-
||Highlight '''Sources''' in '''Benefits of sodium - Sources'''

||Notice the '''Page Title''' that we typed in the '''Insert Pagebreak''' field.

|-
||Continue the highlight and point to the Title

||It has been appended to the title of the '''article'''.

<<PAUSE>>

|-
||Click on '''Digital India'''

||Now, let’s click on the '''Digital India''' link to go back to our website’s '''Homepage'''.

|-
||Scroll down to show the '''article Benefits of Sodium.'''

||Scroll down to see the '''article Benefits of Sodium'''.

Notice here that the full '''article''' text is displayed on the '''Homepage'''.

|-
||

||Let us explore how to add a '''Read More''' option here.

This option will show only a part of the '''article''' on the '''Homepage'''.

|-
||On the '''Homepage''', point to the text:
'''Daily consumption of…….. '''

||For this '''article''', I’ll insert a '''Read More''' link before the text:
Daily consumption of sodium, however, depends on a number of factors.

|-
||Switch to '''Edit Article''' webpage

||Go back to the '''Edit Article''' webpage.

|-
||Place the cursor before '''Daily consumption of …..'''

||Place the cursor at the point where you want to insert the '''Read More''' link.

|-
||Click on '''Read More''' button.

||Now, at the bottom, click on the '''Read More''' button next to the '''Page Break''' button.

|-
||Click on '''Save''' button.

||Scroll up and click on the '''Save''' button.

Switch to the webpage and refresh it.

|-
||Highlight '''Read More: Benefits of sodium'''

||We can see the '''Read More''' link below the '''article''' text here.

|-
||Click on '''Read More: Benefits of sodium'''

||When we click on it, the '''article Benefits of Sodium''' opens.

And it will display the full '''article''' in 2 pages, just as we had set it earlier.

|-
||

||<<PAUSE>>

Let us summarise.

|-
||Switch to Slide 8:

'''Summary: Same as narration'''

||In this tutorial, we learnt about:

*'''Article''' editor in '''Joomla'''.
*Basic formatting of an '''article'''
*Styling an '''article''' text

|-
||Switch to Slide 9:

Same as narration

||We also learnt how to:

*Insert '''Lists'''
*Insert '''Page Break''' and
*Insert '''Read More''' in '''articles'''.

|-
||Slide 10 & 11:

Assignment

||Here is an assignment for you:

*Modify the 4 health benefits of '''sodium''' as a numbered list.
*Center align the heading '''Food Sources'''.
*Remove the '''Read More''' link and put it just before '''Food Sources'''
*Add the text '''Melting Point 97.72 °C''' as pre-formatted text along with the current pre-formatted text.
Hint: 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.

|-
||'''Show Slide 12:'''
(About Spoken Tutorial Project)

||The video at this link, summarizes the '''Spoken Tutorial '''project.
Please download and watch it.

|-
||'''Show Slide 13:'''

(About Spoken Tutorial Project)

||The '''Spoken Tutorial''' Project Team
*conducts workshops using '''spoken tutorials''' and
*gives certificates on passing online tests.

For more details, please write to us.

|-
||'''Show Slide 14:'''

(Acknowledgement)

||'''Spoken Tutorial '''Project is supported by '''NMEICT, MHRD, Government of India.'''

|-
||

||This is Priyanka signing off. Thank you for joining.

|-
|}

@@ Line 26: / Line 26: @@
 *Insert '''lists'''
 *Insert a '''page break''' and
-*Insert '''Read More''' link in '''articles'''.
+*Insert '''Read More links'''  in '''articles'''.

@@ Line 168: / Line 168: @@
 || '''Headings''' are very useful in making text easier to read on the screen.
-'''Headings''' also define the hierarchy of importance.
+'''Headings''' also define the hierarchy of details.
 |-
@@ Line 370: / Line 370: @@
 *'''Un-do''' and '''Redo'''
 *'''Insert links, images, tables''', etc.
-*'''Superscript, subscript''' and '''special characters'''
+*'''Subscript, superscript ''' and '''special characters'''
 You can try these on your own and see how they work.
@@ Line 401: / Line 401: @@
 |-
 ||Click on '''Horizontal Line''' icon.
-||Now click on the '''Horizontal Line''' icon in the formatting menu bar.
+||Now click on the '''Horizontal Line''' icon in the formatting tool bar.
 This will insert a horizontal line.
@@ Line 408: / Line 408: @@
 ||Click on Save button >> Switch to the  webpage and press F5
-||'''Save''' and refresh the page.
+||'''Save''' and refresh the Digital India webpage.
 We can see the changes in the '''article “Benefits of Sodium”'''.
@@ Line 605: / Line 605: @@
 *Insert '''Lists'''
 *Insert '''Page Break''' and
-*Insert '''Read More''' in '''articles'''.
+*Insert '''Read More links''' in '''articles'''.
 |-

@@ Line 26: / Line 26: @@
 *Insert '''lists'''
 *Insert a '''page break''' and
-*Insert '''Read More''' link in articles.
+*Insert '''Read More''' link in '''articles'''.
@@ Line 61: / Line 61: @@
 || Click on '''Article Manager'''
 || Click on '''Article Manager. '''
-Here are the articles we created earlier:
+Here are the '''articles''' we created earlier:
 *'''“Benefits of Sodium”''' and
 *'''“Vitamin A”'''
@@ Line 96: / Line 96: @@
 || Let’s go back to the '''Article Manager.'''
-Click on the article title '''“Benefits of Sodium”.'''
+Click on the '''article''' title '''“Benefits of Sodium”.'''
 |-
@@ Line 203: / Line 203: @@
 || Switch back to '''Edit Article''' webpage
-|| Switch to the '''Edit Article webpage.'''
+|| Switch to the '''Edit Article''' webpage.
 |-
@@ Line 229: / Line 229: @@
 || Select '''Food Sources''' >> Click on '''Paragraph''' button>> Select '''Heading 4'''
-|| Select the text '''Food Sources:''' and in the Paragraph drop-down, select '''Heading 4'''.
+|| Select the text '''Food Sources:''' and in the '''Paragraph''' drop-down, select '''Heading 4'''.
 |-
@@ Line 267: / Line 267: @@
 ||
-||Please note that the:
+||Please note that:
-Header formatting applies to the entire paragraph and not to particular words.
+The '''header formatting''' applies to the entire paragraph and not to particular words.
 |-
 || Press '''Enter'''.
-||To separate this line from the heading, press '''Enter''' before the newly added text.
+||To separate this line from the '''heading''', press '''Enter''' before the newly added text.
 |-
 ||Select the text >> Click on '''Paragraph''' button→ '''Paragraph'''
-||Then select the text and from the '''Paragraph''' drop-down select the option '''Paragraph'''.
+||Then select the text and from the '''Paragraph''' drop-down, select the option '''Paragraph'''.
 The text is no longer in '''Heading 4''' format.
@@ Line 295: / Line 295: @@
 ||Select the new text line.  Click on '''Paragraph → Pre'''.
-||Select the text line and then from the '''Paragraph''' drop-down button select '''Pre'''.
+||Select the text line and then from the '''Paragraph''' drop-down button, select '''Pre'''.
 |-
@@ Line 370: / Line 370: @@
 *'''Un-do''' and '''Redo'''
 *'''Insert links, images, tables''', etc.
-*'''Superscript, subscript and special characters'''
+*'''Superscript, subscript''' and '''special characters'''
 You can try these on your own and see how they work.
@@ Line 388: / Line 388: @@
 ||Here we have 2 sections:
-*Text about introduction of sodium and its benefits and
+*Text about introduction of '''sodium''' and its benefits and
 *'''Food Sources.'''
-Let’s separate these two sections using a horizontal line.
+|-
 |-
 ||Point the cursor before '''Sources of Sodium''' text.
 ||Keep the cursor before the text '''Food Sources'''.
-Now click on the '''Horizontal Line''' icon in the formatting menu bar.
+|-
 This will insert a horizontal line.
@@ Line 452: / Line 453: @@
 '''Table of Contents: Sources of Sodium'''
-||Enter '''Sources''' as '''Page Title''' and '''Food Sources of Sodium''' as '''Table of Contents Alias'''.
+||Enter
 |-
@@ Line 462: / Line 465: @@
 |-
-||Click on '''Save''' button >> Switch to the '''Digital India''' webpage and press '''F5'''
+||Click on '''Save''' button
-−
 ||Click on '''Save''' button.
-Switch to the '''Digital India''' webpage and refresh it.
+|-
 |-
@@ Line 537: / Line 541: @@
 ||For this '''article''', I’ll insert a '''Read More''' link before the text:
-Daily consumption of sodium, however, depends on a number of factors.
+'''Daily consumption of sodium, however, depends on a number of factors.'''
 |-
@@ Line 611: / Line 615: @@
 *Modify the 4 health benefits of '''sodium''' as a numbered list.
-*Center align the heading '''Food Sources'''.
+*'''Center align''' the heading '''Food Sources'''.
 *Remove the '''Read More''' link and put it just before '''Food Sources'''
 *Add the text '''Melting Point 97.72 °C''' as pre-formatted text along with the current pre-formatted text.
-Hint: Use special characters to get the text '''°C''' in the '''article'''.
+Hint: 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.
 |-
@@ Line 643: / Line 646: @@
 (Acknowledgement)
-||'''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.
 |-

@@ Line 223: / Line 223: @@
 || Type '''Food Sources:''' as the heading.
-We will type 3 sources here –
+We will type 3 food sources here –
 '''Salt, Processed Food''' and '''Canned Food'''.

@@ Line 50: / Line 50: @@
 Prior Knowledge
-|| Earlier, we learnt to create, edit, copy and delete an '''article''' in '''Joomla'''.
+|| Earlier, we learnt to create, edit, delete and copy an '''article''' in '''Joomla'''.
 Now, let’s learn how to format '''articles.'''

@@ Line 44: / Line 44: @@
 || To follow this tutorial:
 *You should know how to create '''articles''' in '''Joomla'''
-*If not, check the relevant '''Joomla''' tutorials on the '''Spoken Tutorial''' website.
+*If not, check the relevant '''Joomla''' tutorials on the website.
 |-
@@ Line 62: / Line 62: @@
 || Click on '''Article Manager. '''
 Here are the articles we created earlier:
-'''*“Benefits of Sodium”''' and
+*'''“Benefits of Sodium”''' and
-'''*“Vitamin A”'''
+*'''“Vitamin A”'''
 |-
@@ Line 302: / Line 302: @@
 ||The '''Pre''' option is for preformatted text.
-Preformatted text is displayed in fixed width font, and preserves both spaces and line breaks.
+Preformatted text is displayed in fixed wide font, and preserves both spaces and line breaks.
 |-
@@ Line 407: / Line 407: @@
 ||Click on Save button >> Switch to the  webpage and press F5
-||'''Save''' and refresh the webpage.
+||'''Save''' and refresh the page.
 We can see the changes in the '''article “Benefits of Sodium”'''.
@@ Line 450: / Line 450: @@
 ||'''Page Title: Sources'''
-Table of Contents: Sources of Sodium
+'''Table of Contents: Sources of Sodium'''
 ||Enter '''Sources''' as '''Page Title''' and '''Food Sources of Sodium''' as '''Table of Contents Alias'''.
@@ Line 494: / Line 494: @@
 ||Click on '''Next''' button.
-||Click on the '''Next''' button.
+||Click on '''Next''' button.
 |-
@@ Line 624: / Line 624: @@
 (About Spoken Tutorial Project)
-||The video at this link, summarizes the '''Spoken Tutorial '''project.
+||The video at the following link, summarizes the '''Spoken Tutorial '''project.
 Please download and watch it.
@@ Line 633: / Line 633: @@
 ||The '''Spoken Tutorial''' Project Team
-*conducts workshops using '''spoken tutorials''' and
+*conducts workshops and
 *gives certificates on passing online tests.
@@ Line 643: / Line 643: @@
 (Acknowledgement)
-||'''Spoken Tutorial '''Project is supported by '''NMEICT, MHRD, Government of India.'''
+||'''Spoken Tutorial '''Project is funded by '''NMEICT, MHRD, Government of India.'''. More information on this mission is available at the link shown.
 |-