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

From Script | Spoken-Tutorial
Jump to: navigation, search
Line 26: Line 26:
 
*Insert '''lists'''
 
*Insert '''lists'''
 
*Insert a '''page break''' and
 
*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'''
 
|| 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
 
*'''“Benefits of Sodium”''' and
 
*'''“Vitamin A”'''
 
*'''“Vitamin A”'''
Line 96: Line 96:
 
|| Let’s go back to the '''Article Manager.'''
 
|| 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 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 '''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'''.
 
|| 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'''
 
||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.
 
The text is no longer in '''Heading 4''' format.
Line 295: Line 295:
 
||Select the new text line.  Click on '''Paragraph → Pre'''.
 
||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'''
 
*'''Un-do''' and '''Redo'''
 
*'''Insert links, images, tables''', etc.
 
*'''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.
 
You can try these on your own and see how they work.
Line 388: Line 388:
  
 
||Here we have 2 sections:  
 
||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.'''
 
*'''Food Sources.'''
  
−
Let’s separate these two sections using a horizontal line.
+
|-
 +
||
 +
||Let’s separate these two sections using a horizontal line.
  
 
|-
 
|-
 
||Point the cursor before '''Sources of Sodium''' text.
 
||Point the cursor before '''Sources of Sodium''' text.
−
 
−
Click on '''Horizontal Line''' icon.
 
−
 
 
||Keep the cursor before the text '''Food Sources'''.
 
||Keep the cursor before the text '''Food Sources'''.
  
−
Now click on the '''Horizontal Line''' icon in the formatting menu bar.
+
|-
 +
||Click on '''Horizontal Line''' icon.
 +
||Now click on the '''Horizontal Line''' icon in the formatting menu bar.
  
 
This will insert a horizontal line.
 
This will insert a horizontal line.
Line 452: Line 453:
 
'''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'''.
+
||Enter  
 +
*'''Sources''' as '''Page Title'''  
 +
*and '''Food Sources of Sodium''' as '''Table of Contents Alias'''.
  
 
|-
 
|-
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.  
 
||Click on '''Save''' button.  
  
−
Switch to the '''Digital India''' webpage and refresh it.
+
|-
 +
||Switch to the '''Digital India''' webpage and press '''F5'''
 +
||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:
 
||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.
 
*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'''
 
*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.
 
*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.'''
 
*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 643: Line 646:
 
(Acknowledgement)
 
(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.
  
 
|-
 
|-

Revision as of 11:22, 12 February 2016

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 website.
Show Slide 6

Prior Knowledge

Earlier, we learnt to create, edit, delete and copy 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 food 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 wide 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. Keep the cursor before the text Food Sources.
Click on Horizontal Line icon. 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 page.

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 Click on Save button.
Switch to the Digital India webpage and press F5 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 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 the following 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 and
  • gives certificates on passing online tests.

For more details, please write to us.

Show Slide 14:

(Acknowledgement)

Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.. More information on this mission is available at the link shown.
This is Priyanka signing off. Thank you for joining.

Contributors and Content Editors

Itspriyanka, Nancyvarkey, Nirmala Venkat

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