Difference between revisions of "HTML/C2/Formatting-Tags-in-HTML/English"

From Script | Spoken-Tutorial
Jump to: navigation, search
Line 7: Line 7:
 
'''Novice Reviewer:''' Madhulika G
 
'''Novice Reviewer:''' Madhulika G
  
−
'''Keywords:''' HTML, Formatting Tags, Text Formatting in HTML, Paragraph Tag, Heading Tag, Web Designing, Web Site, Spoken Tutorial, Video Tutorial
+
'''Keywords:''' HTML, Formatting Tags, Text Formatting in HTML, Paragraph Tag, Heading Tag, Web Designing, Web Site, Spoken Tutorial, Video Tutorial
  
  
Line 22: Line 22:
 
|| Slide 2: Learning Objectives  
 
|| Slide 2: Learning Objectives  
 
|| In this tutorial we will learn about:
 
|| In this tutorial we will learn about:
 +
 
*Formatting text and
 
*Formatting text and
 
*Creating '''hyperlinks'''
 
*Creating '''hyperlinks'''
 +
 
in '''HTML '''using some examples.
 
in '''HTML '''using some examples.
  
 
|-
 
|-
 
|| Slide 3: Prerequisite  
 
|| Slide 3: Prerequisite  
−
|| To practise this tutorial, you should know to use any '''WYSIWYG '''or '''Text Editor''' and '''Web Browser'''.
+
|| To practise this tutorial, you should know to use  
 +
any '''WYSIWYG '''or '''Text Editor''' and '''Web Browser'''.
 +
 
 
If not, then go through '''gedit Text Editor '''and '''Firefox '''tutorials on this website.
 
If not, then go through '''gedit Text Editor '''and '''Firefox '''tutorials on this website.
  
 
|-
 
|-
 
|| Slide 4: System Requirements  
 
|| Slide 4: System Requirements  
−
|| To record this tutorial, I’m using *'''Ubuntu Linux 16.04 OS'''
+
|| To record this tutorial, I’m using  
 +
*'''Ubuntu Linux 16.04 OS'''
 
*'''HTML5'''
 
*'''HTML5'''
 
*'''gedit Text Editor '''and
 
*'''gedit Text Editor '''and
 
*'''Firefox web browser'''
 
*'''Firefox web browser'''
 +
 
However you may, use any other '''editor''' or '''browser''' of your choice.
 
However you may, use any other '''editor''' or '''browser''' of your choice.
  
Line 47: Line 53:
 
|| Slide 6: Formatting Tags
 
|| Slide 6: Formatting Tags
 
|| '''HTML''' allows us to do basic formatting of the content.
 
|| '''HTML''' allows us to do basic formatting of the content.
 +
 
'''Formatting tags''' are exactly like the ones that are there in any '''word processor''' application.
 
'''Formatting tags''' are exactly like the ones that are there in any '''word processor''' application.
  
Line 52: Line 59:
 
|| Slide 6: Formatting Tags
 
|| Slide 6: Formatting Tags
 
|| Some of the '''formatting tags''' are:
 
|| Some of the '''formatting tags''' are:
 +
 
*'''Headings (h1, h2, h3, h4, h5, h6)'''
 
*'''Headings (h1, h2, h3, h4, h5, h6)'''
 
*'''Paragraph'''
 
*'''Paragraph'''
Line 64: Line 72:
 
*'''Horizontal Ruler '''and  
 
*'''Horizontal Ruler '''and  
 
*'''Anchor'''
 
*'''Anchor'''
 +
 
We will learn them one by one.
 
We will learn them one by one.
  
Line 70: Line 79:
 
|| In any document, we use headings for various purposes in various sizes.
 
|| In any document, we use headings for various purposes in various sizes.
 
'''HTML''' allows us to create headings with six different sizes.  
 
'''HTML''' allows us to create headings with six different sizes.  
 +
 
'''Heading tag '''will start from '''h1''' for large headings and end with '''h6''' for smaller ones.  
 
'''Heading tag '''will start from '''h1''' for large headings and end with '''h6''' for smaller ones.  
 +
 
A line space will be added automatically before and after the headings.
 
A line space will be added automatically before and after the headings.
  
Line 76: Line 87:
 
|| Open '''MyFirstPage.html '''in''' gedit'''
 
|| Open '''MyFirstPage.html '''in''' gedit'''
 
|| Let us open our file '''MyFirstPage.html, '''which we created earlier.
 
|| Let us open our file '''MyFirstPage.html, '''which we created earlier.
 +
 
The same is available in the '''Code Files''' link.
 
The same is available in the '''Code Files''' link.
  
 
|-  
 
|-  
 
|| Point to  
 
|| Point to  
−
'''''<h1> Welcome to Farmer's Market </h1>'''''
+
<nowiki> <h1> Welcome to Farmer's Market </h1> </nowiki>
−
|| In our code, we have already used''' <h1> heading tag.'''
+
|| In our code, we have already used ''' <nowiki> <h1> </nowiki> heading tag.'''
  
 
|-  
 
|-  
−
|| '''<h2> Welcome to Farmer's Market </h2>'''
+
||<nowiki> <h2> Welcome to Farmer's Market </h2> </nowiki>
−
'''<h3> Welcome to Farmer's Market </h3>'''
+
 
−
'''<h4> Welcome to Farmer's Market </h4>'''
+
<nowiki>  <h3> Welcome to Farmer's Market </h3> </nowiki>
−
'''<h5> Welcome to Farmer's Market </h5>'''
+
 
−
'''<h6> Welcome to Farmer's Market </h6>'''
+
<nowiki>  <h4> Welcome to Farmer's Market </h4> </nowiki>
 +
 
 +
<nowiki>  <h5> Welcome to Farmer's Market </h5> </nowiki>
 +
 
 +
<nowiki>  <h6> Welcome to Farmer's Market </h6> </nowiki>
 +
 
 
|| Let me add a few more lines of code to this program.
 
|| Let me add a few more lines of code to this program.
 +
 
Type the following lines with proper indentation, below the '''h1 heading tag.'''
 
Type the following lines with proper indentation, below the '''h1 heading tag.'''
  
Line 107: Line 125:
 
|| Open '''MyFirstPage.html '''in '''Firefox'''
 
|| Open '''MyFirstPage.html '''in '''Firefox'''
 
|| Go to the folder where the file is saved.
 
|| Go to the folder where the file is saved.
 +
 
Right-click and open with your preferred '''web browser.'''
 
Right-click and open with your preferred '''web browser.'''
  
Line 119: Line 138:
 
|-  
 
|-  
 
|| Switch to gedit
 
|| Switch to gedit
 +
 
Press Ctrl + Z
 
Press Ctrl + Z
  
 
|| Switch back to the '''editor. '''
 
|| Switch back to the '''editor. '''
 +
 
And undo the changes by pressing '''Ctrl + Z '''keys''' .'''
 
And undo the changes by pressing '''Ctrl + Z '''keys''' .'''
  
 
|-  
 
|-  
 
|| Add
 
|| Add
−
'''''<b>Tomato:</b> <i>is an edible <u>fruit</u></i>'''''
+
 
 +
<nowiki> <b>Tomato:</b> <i>is an edible <u>fruit</u></i></nowiki>
 
|| Next we will see how to format the text to make it '''bold, italic '''and so on.
 
|| Next we will see how to format the text to make it '''bold, italic '''and so on.
 +
 
Please pause the tutorial here.
 
Please pause the tutorial here.
 +
 
And add the following lines of code next to the paragraph''' '''in your file, as shown here.
 
And add the following lines of code next to the paragraph''' '''in your file, as shown here.
  
 
|-  
 
|-  
 
|| Point to the new formatted code.
 
|| Point to the new formatted code.
−
'''''<b>Tomato:</b> <i>is an edible <u>fruit</u></i>'''''
+
 
 +
<nowiki> <b>Tomato:</b> <i>is an edible <u>fruit</u></i> </nowiki>
 +
 
 
|| This line of code will demonstrate the use of '''bold, italic''' and '''underline'''.
 
|| This line of code will demonstrate the use of '''bold, italic''' and '''underline'''.
−
Here I have used the''' tag <b>''' for '''bold.'''
+
 
−
So any text written in between these '''<b> tags''' will appear '''bold '''in the output.
+
Here I have used the''' tag <nowiki> <b> </nowiki>''' for '''bold.'''
 +
 
 +
So any text written in between these '''<nowiki><b></nowiki> tags''' will appear '''bold '''in the output.
  
 
|-  
 
|-  
−
|| Point to.
+
|| Point to
−
'''''<i>is an edible <u>fruit</u></i> '''''
+
 
−
|| Likewise, the text within the '''<i> tag '''will be '''italic '''and '''<u> tag '''will be '''underlined'''.
+
<nowiki> <i>is an edible <u>fruit</u></i> </nowiki>
 +
 
 +
|| Likewise, the text within the '''<nowiki> <i> </nowiki> tag '''will be '''italic '''and '''<nowiki> <u> </nowiki> tag '''will be '''underlined'''.
 +
 
 
Please look at the way I have written them here.
 
Please look at the way I have written them here.
  
 
|-  
 
|-  
 
|| Point to.
 
|| Point to.
−
'''''<i>is an edible <u>fruit</u></i> '''''
+
 
 +
<nowiki> <i>is an edible <u>fruit</u></i> </nowiki>
 +
 
 
|| Here I have used the '''underline tag''' inside the '''italic tag.'''
 
|| Here I have used the '''underline tag''' inside the '''italic tag.'''
 +
 
This way of writing code is called as '''Nested elements'''.
 
This way of writing code is called as '''Nested elements'''.
  
 
|-  
 
|-  
−
||(text overlay with a highlight box while editing
+
||
−
'''Nested elements''')
+
|| While using a '''tag''' inside another '''tag''',  
−
|| While using a '''tag''' inside another '''tag''', always remember to close the '''tags''' in the reverse order.
+
 
 +
always remember to close the '''tags''' in the reverse order.
  
 
|-  
 
|-  
Line 174: Line 209:
 
|| Switch to firefox and refresh the page.
 
|| Switch to firefox and refresh the page.
 
|| Let’s switch to the browser and refresh the page to see the output.
 
|| Let’s switch to the browser and refresh the page to see the output.
 +
 
Observe the change in the content that is displayed.
 
Observe the change in the content that is displayed.
  
Line 183: Line 219:
 
|| Point to the br tag in the code
 
|| Point to the br tag in the code
 
|| To create a '''line break''', we have to use the '''break tag.'''
 
|| To create a '''line break''', we have to use the '''break tag.'''
 +
 
Here we already have a '''break tag''' in our code.
 
Here we already have a '''break tag''' in our code.
  
Line 196: Line 233:
 
|| Point to the line space between the first two lines.
 
|| Point to the line space between the first two lines.
 
|| Notice here, the line space between the first two lines is now reduced.
 
|| Notice here, the line space between the first two lines is now reduced.
 +
 
The existing line space is the one that is created by the''' heading tag.'''
 
The existing line space is the one that is created by the''' heading tag.'''
  
Line 201: Line 239:
 
|| Switch to the editor >> Ctrl+Z
 
|| Switch to the editor >> Ctrl+Z
 
|| Switch back to the editor and undo the changes.
 
|| Switch back to the editor and undo the changes.
 +
 
Save the file.
 
Save the file.
  
Line 206: Line 245:
 
|| Switch to firefox and refresh the page.
 
|| Switch to firefox and refresh the page.
 
|| Now come back to the browser and refresh the page.
 
|| Now come back to the browser and refresh the page.
 +
 
Notice the line space.
 
Notice the line space.
  
Line 211: Line 251:
 
|| Slide 8: Break tag
 
|| Slide 8: Break tag
 
|| Note that the '''break tag'''  
 
|| Note that the '''break tag'''  
−
*can be written as follows '''<br/> or <br>'''
+
 
 +
*can be written as follows '''<nowiki> <br/> or <br> </nowiki>'''
 
*It is a '''self-closing tag''' which doesn’t require an '''end tag.'''
 
*It is a '''self-closing tag''' which doesn’t require an '''end tag.'''
  
Line 220: Line 261:
 
|-  
 
|-  
 
|| Add:  
 
|| Add:  
−
'''''<br/> '''''
+
<nowiki> <br/> </nowiki>
−
'''''<i> Price: <del>Rs.20/Kg</del> Rs.15/Kg <sup>(Today's offer)</sup> <i>'''''
+
 
 +
<nowiki> <i> Price: <del>Rs.20/Kg</del> Rs.15/Kg </nowiki> 
 +
 
 +
<nowiki> <sup>(Today's offer)</sup> <i></nowiki>
 +
 
 
|| I will add a few more lines to this code.  
 
|| I will add a few more lines to this code.  
 +
 
Please do so in your file, too.
 
Please do so in your file, too.
 +
 
Notice here - I have used the '''strikethrough''' and '''superscript tags.'''
 
Notice here - I have used the '''strikethrough''' and '''superscript tags.'''
  
Line 248: Line 295:
 
|-  
 
|-  
 
|| Point to '''del tag'''
 
|| Point to '''del tag'''
−
|| The content written within the '''<del> tag '''will be struck through.
+
|| The content written within the '''<nowiki> <del> </nowiki> tag '''will be struck through.
  
 
|-  
 
|-  
 
|| Point to '''sup tag'''
 
|| Point to '''sup tag'''
−
|| And the content written within the '''<sup> tag '''will appear as superscript.
+
|| And the content written within the '''<nowiki> <sup> </nowiki> tag '''will appear as superscript.
  
 
|-  
 
|-  
 
|| Overwrite '''sup''' in to '''sub'''
 
|| Overwrite '''sup''' in to '''sub'''
−
|| For '''subscript''', we should use the '''<sub> tag.'''
+
|| For '''subscript''', we should use the '''<nowiki> <sub> </nowiki> tag.'''
 +
 
 
Please try this option on your own.
 
Please try this option on your own.
  
 
|-  
 
|-  
−
|| Type <hr>
+
|| Type <nowiki> <hr> </nowiki>  
−
|| Now, in the next line, I will type the '''<hr> tag.'''
+
|| Now, in the next line, I will type the '''<nowiki> <hr> </nowiki>  tag.'''
 
This''' tag '''will create a horizontal line.
 
This''' tag '''will create a horizontal line.
  
Line 282: Line 330:
 
|-  
 
|-  
 
|| Type the code:
 
|| Type the code:
−
'''''<p>Tomatoes contain <small>folic acid,</small> and <big>vitamins</big> A, C, <del>D</del><ins> and E.</ins></p>'''''
+
<nowiki> <p>Tomatoes contain <small>folic acid,</small> </nowiki>
−
|| Let me add some more lines of code here, after the '''<hr> tag'''.
+
 
 +
<nowiki> and <big>vitamins</big> A, C,</nowiki>
 +
 
 +
<nowiki> <del>D</del><ins> and E.</ins></p> </nowiki>
 +
 
 +
|| Let me add some more lines of code here, after the <nowiki>'''<hr> tag'''</nowiki>.
 +
 
 
Observe that I have used the '''small '''and '''big tags '''here, along with '''ins tag'''.
 
Observe that I have used the '''small '''and '''big tags '''here, along with '''ins tag'''.
  
Line 297: Line 351:
 
|| Point to the line in the webpage
 
|| Point to the line in the webpage
 
|| Notice that the words “'''folic acid'''” appears smaller in size.
 
|| Notice that the words “'''folic acid'''” appears smaller in size.
 +
 
And the word “'''Vitamins'''” appear bigger in size, compared to the normal font size.
 
And the word “'''Vitamins'''” appear bigger in size, compared to the normal font size.
  
Line 303: Line 358:
 
Highlight '''small''' and''' big tags.'''
 
Highlight '''small''' and''' big tags.'''
 
|| Let’s come back to our code file.
 
|| Let’s come back to our code file.
 +
 
This effect is achieved by using the '''small '''and '''big tags.'''
 
This effect is achieved by using the '''small '''and '''big tags.'''
 +
 
The '''small tag''' make the content smaller and the '''big tag''' makes it larger.
 
The '''small tag''' make the content smaller and the '''big tag''' makes it larger.
  
Line 309: Line 366:
 
|| Point to deleted and inserted text.
 
|| Point to deleted and inserted text.
 
|| Let’s go back to our webpage.
 
|| Let’s go back to our webpage.
 +
 
Also notice that, the words “'''and E'''” are underlined.
 
Also notice that, the words “'''and E'''” are underlined.
  
Line 314: Line 372:
 
|| Show the code here
 
|| Show the code here
 
|| But recall that in our code, we have used '''insert tag.'''
 
|| But recall that in our code, we have used '''insert tag.'''
 +
 
The browser will print the '''underline''' and '''insert''' in the same '''style'''.
 
The browser will print the '''underline''' and '''insert''' in the same '''style'''.
 +
 
The''' insert tag''' is used to mention that the inserted content should be '''underlined'''.
 
The''' insert tag''' is used to mention that the inserted content should be '''underlined'''.
  
Line 320: Line 380:
 
|| Slide 9: Anchor Tag
 
|| Slide 9: Anchor Tag
 
|| Now let’s learn about '''anchor tag'''.
 
|| Now let’s learn about '''anchor tag'''.
−
In our '''webpage '''we could have many links that navigate us to either-*a section in the same page
+
 
 +
In our '''webpage '''we could have many links that navigate us to either-
 +
 
 +
*a section in the same page
 
*or a different page  
 
*or a different page  
 
*or an external website.
 
*or an external website.
Line 326: Line 389:
 
|-  
 
|-  
 
|| Slide 9: Anchor Tag
 
|| Slide 9: Anchor Tag
−
|| *This action can be created with the help of '''<a>''' tag
+
|| *This action can be created with the help of '''<nowiki> <a> </nowiki>''' tag
 +
 
 
*This '''tag '''is also called as '''hyperlink tag'''.
 
*This '''tag '''is also called as '''hyperlink tag'''.
  
 
|-  
 
|-  
 
|| Switch to editor
 
|| Switch to editor
−
'''''<a href=""> Click Here </a>'''''
+
<nowiki> <a href=""> Click Here </a> </nowiki>
 
|| Let’s switch to the editor and type the following code after the second '''paragraph tag'''.
 
|| Let’s switch to the editor and type the following code after the second '''paragraph tag'''.
  
Line 349: Line 413:
 
|| Hover the mouse
 
|| Hover the mouse
 
|| The text appears to be hyperlinked.  
 
|| The text appears to be hyperlinked.  
 +
 
And when we hover the mouse, the cursor changes into a hand icon.
 
And when we hover the mouse, the cursor changes into a hand icon.
  
Line 354: Line 419:
 
|| Click on '''Click Here'''
 
|| Click on '''Click Here'''
 
|| But when we click on it, nothing happens.
 
|| But when we click on it, nothing happens.
 +
 
Let’s find out why that is so.
 
Let’s find out why that is so.
  
Line 365: Line 431:
 
|| Slide 10: Anchor Tag
 
|| Slide 10: Anchor Tag
 
|| This is the syntax:  
 
|| This is the syntax:  
−
'''''<a href=”target link”> Content </a> '''''
+
<nowiki><a href=”target link”> Content </a> </nowiki>
  
 
|-  
 
|-  
Line 378: Line 444:
  
 
|-  
 
|-  
−
|| Type
+
|| Type:
−
'''''<br/>'''''
+
<nowiki> <br/> </nowiki>
−
'''''<a href="MyHomePage.html"> Local File Link </a>'''''
+
 
−
'''''</br/>'''''
+
<nowiki> <a href="MyHomePage.html"> Local File Link </a> </nowiki>
 +
 
 +
<nowiki> <br/> </nowiki>
 
|| In the next line after '''Click here''', type the following code.
 
|| In the next line after '''Click here''', type the following code.
  
Line 395: Line 463:
 
|| Point to the Links
 
|| Point to the Links
 
|| We can see two links here.
 
|| We can see two links here.
 +
 
'''''Click here '''and '''Local File Link'''''
 
'''''Click here '''and '''Local File Link'''''
  
Line 400: Line 469:
 
|| Click on '''Click here'''
 
|| Click on '''Click here'''
 
|| In the first case “'''Click here'''”, I haven’t given any link and have just kept it as blank.
 
|| In the first case “'''Click here'''”, I haven’t given any link and have just kept it as blank.
 +
 
If the '''href''' value is empty, it will keep us on the same page.
 
If the '''href''' value is empty, it will keep us on the same page.
  
Line 406: Line 476:
 
Show both the code and output
 
Show both the code and output
 
|| In the next one, I have given the name of the '''HTML''' file which we have used for assignment.
 
|| In the next one, I have given the name of the '''HTML''' file which we have used for assignment.
 +
 
Clicking on this link will take us to the mentioned page.
 
Clicking on this link will take us to the mentioned page.
  
Line 411: Line 482:
 
||'''Slide''' 11: Redirecting Link
 
||'''Slide''' 11: Redirecting Link
 
|| While redirecting to a local link,  
 
|| While redirecting to a local link,  
 +
 
*make sure that the specified '''HTML''' file is available in the same folder.
 
*make sure that the specified '''HTML''' file is available in the same folder.
 
*Or specify the filename along with the path
 
*Or specify the filename along with the path
Line 434: Line 506:
 
|-  
 
|-  
 
|| Point to  
 
|| Point to  
−
'''<br/>'''
+
<nowiki> <br/> </nowiki>
−
'''''<a href="http://spoken-tutorial.org" ''target=”_blank”''> External Link </a>'''''
+
 
 +
<nowiki> <a href="http://spoken-tutorial.org" ''target=”_blank”''> </nowiki>
 +
 
 +
<nowiki> External Link </a> </nowiki>
 +
 
 
Highlight space before target
 
Highlight space before target
 
|| Let’s add this line of code here.
 
|| Let’s add this line of code here.
 +
 
In this line of code, I have given an external website link and set the target to a blank page.
 
In this line of code, I have given an external website link and set the target to a blank page.
 +
 
This means the specified website will open in a new tab.
 
This means the specified website will open in a new tab.
 +
 
The '''spaces '''are only for readability of the code.
 
The '''spaces '''are only for readability of the code.
  
Line 449: Line 528:
 
|| Switch to browser >> Refresh
 
|| Switch to browser >> Refresh
 
|| Refresh the page to update the change.
 
|| Refresh the page to update the change.
 +
 
Click on the '''External Link.'''  
 
Click on the '''External Link.'''  
 +
 
The specified link opens in a new tab.
 
The specified link opens in a new tab.
  
Line 464: Line 545:
 
|| Slide 13: Summary  
 
|| Slide 13: Summary  
 
|| In this tutorial, we have learnt about  
 
|| In this tutorial, we have learnt about  
 +
 
*'''Formatting tags in HTML like:'''
 
*'''Formatting tags in HTML like:'''
 
**'''Headings, Paragraph'''
 
**'''Headings, Paragraph'''
Line 474: Line 556:
 
|| Slide 13: Summary  
 
|| Slide 13: Summary  
 
|| We have also learnt about  
 
|| We have also learnt about  
 +
 
*Creating
 
*Creating
 
**'''Internal page link'''
 
**'''Internal page link'''
Line 483: Line 566:
 
|| Slide 14: Assignment
 
|| Slide 14: Assignment
 
'''Apple ''('''Organic''')'''''
 
'''Apple ''('''Organic''')'''''
 +
 
M.R.P: Rs.100/Kg
 
M.R.P: Rs.100/Kg
 +
 
<u>Offer Price: Rs.90/Kg</u>  
 
<u>Offer Price: Rs.90/Kg</u>  
 +
 
Cash on delivery available
 
Cash on delivery available
 
|| As an assignment-  
 
|| As an assignment-  
 +
 
*Open the file '''MyHomePage.html''' which you created earlier.
 
*Open the file '''MyHomePage.html''' which you created earlier.
 
*Format the content as shown here:
 
*Format the content as shown here:
Line 494: Line 581:
 
About Spoken Tutorial project
 
About Spoken Tutorial project
 
|| The video at the following link summarises the Spoken Tutorial project.
 
|| The video at the following link summarises the Spoken Tutorial project.
 +
 
Please download and watch it.
 
Please download and watch it.
  
Line 499: Line 587:
 
|| Slide 16: About Workshop
 
|| Slide 16: About Workshop
 
| | The Spoken Tutorial Project team conducts workshops and gives certificates.
 
| | The Spoken Tutorial Project team conducts workshops and gives certificates.
 +
 
For more details, please write to us.
 
For more details, please write to us.
 
|-
 
|-
Line 507: Line 596:
 
|| Slide 18: Acknowledgement
 
|| Slide 18: Acknowledgement
 
|| Spoken Tutorial Project is funded 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 this link.
 
More information on this mission is available at this link.
  
Line 512: Line 602:
 
|| Slide 19: Thanks
 
|| Slide 19: Thanks
 
|| This is Praveen from IIT Bombay signing off.
 
|| This is Praveen from IIT Bombay signing off.
 +
 
Thank you for joining
 
Thank you for joining
 
|-
 
|-
 
|}
 
|}

Revision as of 16:07, 7 May 2018

Title of the script:Formatting Tags

Author: Praveen S

Domain Reviewer: M. Deivamani

Novice Reviewer: Madhulika G

Keywords: HTML, Formatting Tags, Text Formatting in HTML, Paragraph Tag, Heading Tag, Web Designing, Web Site, Spoken Tutorial, Video Tutorial


Visual Cue Narration
Slide 1: Title Hello and welcome to this Spoken Tutorial on Formatting Tags in HTML.
Slide 2: Learning Objectives In this tutorial we will learn about:
  • Formatting text and
  • Creating hyperlinks

in HTML using some examples.

Slide 3: Prerequisite To practise this tutorial, you should know to use

any WYSIWYG or Text Editor and Web Browser.

If not, then go through gedit Text Editor and Firefox tutorials on this website.

Slide 4: System Requirements To record this tutorial, I’m using
  • Ubuntu Linux 16.04 OS
  • HTML5
  • gedit Text Editor and
  • Firefox web browser

However you may, use any other editor or browser of your choice.

Slide 5: Code Files The files used in this tutorial are available in the Code Files link on this tutorial page.

Please download and extract them.

Slide 6: Formatting Tags HTML allows us to do basic formatting of the content.

Formatting tags are exactly like the ones that are there in any word processor application.

Slide 6: Formatting Tags Some of the formatting tags are:
  • Headings (h1, h2, h3, h4, h5, h6)
  • Paragraph
  • Bold, Italic, Underline
  • Large and Small
Slide 6: Formatting Tags *Insert and Delete
  • Superscript and Subscript
  • Line Break
  • Horizontal Ruler and
  • Anchor

We will learn them one by one.

Slide 7: HTML Headings In any document, we use headings for various purposes in various sizes.

HTML allows us to create headings with six different sizes.

Heading tag will start from h1 for large headings and end with h6 for smaller ones.

A line space will be added automatically before and after the headings.

Open MyFirstPage.html in gedit Let us open our file MyFirstPage.html, which we created earlier.

The same is available in the Code Files link.

Point to

<h1> Welcome to Farmer's Market </h1>

In our code, we have already used <h1> heading tag.
<h2> Welcome to Farmer's Market </h2>

<h3> Welcome to Farmer's Market </h3>

<h4> Welcome to Farmer's Market </h4>

<h5> Welcome to Farmer's Market </h5>

<h6> Welcome to Farmer's Market </h6>

Let me add a few more lines of code to this program.

Type the following lines with proper indentation, below the h1 heading tag.

Point to each line Here I have used all the six heading tags one after another.
Press Ctrl + S Press Ctrl + S keys to save this change.
Now let’s see the output on the browser.
Open MyFirstPage.html in Firefox Go to the folder where the file is saved.

Right-click and open with your preferred web browser.

Point to the different lines one-by-one Observe the differences in the size of the heading “Welcome to Farmer's Market”.
Using appropriate heading as per your need, you can create headings of different sizes.
Switch to gedit

Press Ctrl + Z

Switch back to the editor.

And undo the changes by pressing Ctrl + Z keys .

Add

<b>Tomato:</b> <i>is an edible <u>fruit</u></i>

Next we will see how to format the text to make it bold, italic and so on.

Please pause the tutorial here.

And add the following lines of code next to the paragraph in your file, as shown here.

Point to the new formatted code.

<b>Tomato:</b> <i>is an edible <u>fruit</u></i>

This line of code will demonstrate the use of bold, italic and underline.

Here I have used the tag <b> for bold.

So any text written in between these <b> tags will appear bold in the output.

Point to

<i>is an edible <u>fruit</u></i>

Likewise, the text within the <i> tag will be italic and <u> tag will be underlined.

Please look at the way I have written them here.

Point to.

<i>is an edible <u>fruit</u></i>

Here I have used the underline tag inside the italic tag.

This way of writing code is called as Nested elements.

While using a tag inside another tag,

always remember to close the tags in the reverse order.

Highlight again Here I have opened the italic tag first and then opened the underline tag.
Highlight again While closing, I have closed the underline tag first and then the italic tag.
Follow the same procedure while using nested elements in your future codes.
Press Ctrl + S Save the file.
Switch to firefox and refresh the page. Let’s switch to the browser and refresh the page to see the output.

Observe the change in the content that is displayed.

Switch to the editor Let’s come back to the editor.
Point to the br tag in the code To create a line break, we have to use the break tag.

Here we already have a break tag in our code.

Delete br tag >> Press Ctrl+S So, let me delete this break tag and save the file.
Switch to firefox and refresh the page. Let’s switch to the browser and refresh the page.
Point to the line space between the first two lines. Notice here, the line space between the first two lines is now reduced.

The existing line space is the one that is created by the heading tag.

Switch to the editor >> Ctrl+Z Switch back to the editor and undo the changes.

Save the file.

Switch to firefox and refresh the page. Now come back to the browser and refresh the page.

Notice the line space.

Slide 8: Break tag Note that the break tag
  • can be written as follows <br/> or <br>
  • It is a self-closing tag which doesn’t require an end tag.
Switch to the editor Let’s come back to the editor now.
Add:

<br/>

<i> Price: <del>Rs.20/Kg</del> Rs.15/Kg

<sup>(Today's offer)</sup> <i>

I will add a few more lines to this code.

Please do so in your file, too.

Notice here - I have used the strikethrough and superscript tags.

Press Ctrl + S Let’s save the code.
Switch to the browser Then switch to the browser and refresh the page.
Point to Rs.20/kg Notice the change - the word Rs.20 per kg has been struck through.
Point to Today’s offer And the word “Today’s offer” appears as a superscript.
Switch to the editor. Switch back to the editor once again.
Point to del tag The content written within the <del> tag will be struck through.
Point to sup tag And the content written within the <sup> tag will appear as superscript.
Overwrite sup in to sub For subscript, we should use the <sub> tag.

Please try this option on your own.

Type <hr> Now, in the next line, I will type the <hr> tag.

This tag will create a horizontal line.

Press Ctrl + S >> Switch to browser. Save the code and switch to the browser.
Refresh Refresh the webpage.
Point to the line Notice the horizontal line.
Switch to editor Come back to the editor.
Type the code:

<p>Tomatoes contain <small>folic acid,</small>

and <big>vitamins</big> A, C,

<del>D</del><ins> and E.</ins></p>

Let me add some more lines of code here, after the '''<hr> tag'''.

Observe that I have used the small and big tags here, along with ins tag.

Press Ctrl + S >> Switch to browser. Save the code and switch to the browser.
Refresh webpage Refresh the webpage.
Point to the line in the webpage Notice that the words “folic acid” appears smaller in size.

And the word “Vitamins” appear bigger in size, compared to the normal font size.

Come back to editor and show the code here

Highlight small and big tags.

Let’s come back to our code file.

This effect is achieved by using the small and big tags.

The small tag make the content smaller and the big tag makes it larger.

Point to deleted and inserted text. Let’s go back to our webpage.

Also notice that, the words “and E” are underlined.

Show the code here But recall that in our code, we have used insert tag.

The browser will print the underline and insert in the same style.

The insert tag is used to mention that the inserted content should be underlined.

Slide 9: Anchor Tag Now let’s learn about anchor tag.

In our webpage we could have many links that navigate us to either-

  • a section in the same page
  • or a different page
  • or an external website.
Slide 9: Anchor Tag *This action can be created with the help of <a> tag
  • This tag is also called as hyperlink tag.
Switch to editor

<a href=""> Click Here </a>

Let’s switch to the editor and type the following code after the second paragraph tag.
Press Ctrl + S Then save the file.
Switch to browser >> Refresh Switch to the browser and refresh the page.
Point to “Click here” Here we can see the new text “Click Here” is displayed.
Hover the mouse The text appears to be hyperlinked.

And when we hover the mouse, the cursor changes into a hand icon.

Click on Click Here But when we click on it, nothing happens.

Let’s find out why that is so.

Slide 10: Anchor Tag *Anchor tag should always be declared along with its attribute - href.
  • href stands for hyperlink reference
  • The value of href holds the target link.
Slide 10: Anchor Tag This is the syntax:

<a href=”target link”> Content </a>

Slide 10: Anchor Tag *The content within the Anchor tag is clickable.
  • By clicking on this text, we will be redirected to the targeted link.
  • The content can be a text or an image.
Switch to editor Let’s switch to the editor to modify the code.
Type:

<br/>

<a href="MyHomePage.html"> Local File Link </a>

<br/>

In the next line after Click here, type the following code.
Press Ctrl + S Now save the code.
Switch to browser >> Refresh Then switch to the browser and refresh the page.
Point to the Links We can see two links here.

Click here and Local File Link

Click on Click here In the first case “Click here”, I haven’t given any link and have just kept it as blank.

If the href value is empty, it will keep us on the same page.

Click on Local File Link

Show both the code and output

In the next one, I have given the name of the HTML file which we have used for assignment.

Clicking on this link will take us to the mentioned page.

Slide 11: Redirecting Link While redirecting to a local link,
  • make sure that the specified HTML file is available in the same folder.
  • Or specify the filename along with the path
  • Else you will get “File or Page not found” error.
Slide 12a: Anchor Tag - Target *Target is another important attribute for the anchor tag.
  • It specifies where the target has to be redirected.
Slide 12b: Anchor Tag - Target The values are:*
    • _blank: Opens in a new tab
    • _parent: Opens in the parent frame
    • _self: Opens in the same frame
    • _top: Opens in the full body of the window.
Switch to editor Let us switch back to the editor to try out one of the attributes.
Point to

<br/>

<a href="http://spoken-tutorial.org" ''target=”_blank”''>

External Link </a>

Highlight space before target

Let’s add this line of code here.

In this line of code, I have given an external website link and set the target to a blank page.

This means the specified website will open in a new tab.

The spaces are only for readability of the code.

Press Ctrl + S Save the page and switch to the browser.
Switch to browser >> Refresh Refresh the page to update the change.

Click on the External Link.

The specified link opens in a new tab.

This is how we use formatting tags in HTML.
With this, we come to the end of this tutorial.

Let us summarise.

Slide 13: Summary In this tutorial, we have learnt about
  • Formatting tags in HTML like:
    • Headings, Paragraph
    • Bold, Italic, Underline
    • Large, Small, Insert, Delete
    • Break, horizontal ruler
    • Superscript and Subscript
Slide 13: Summary We have also learnt about
  • Creating
    • Internal page link
    • Local file link
    • External site link
  • Using anchor tag
Slide 14: Assignment

Apple (Organic)

M.R.P: Rs.100/Kg

Offer Price: Rs.90/Kg

Cash on delivery available

As an assignment-
  • Open the file MyHomePage.html which you created earlier.
  • Format the content as shown here:
  • Also create an external link, which redirects to http://fossee.in'
Slide 15:

About Spoken Tutorial project

The video at the following link summarises the Spoken Tutorial project.

Please download and watch it.

Slide 16: About Workshop The Spoken Tutorial Project team conducts workshops and gives certificates.

For more details, please write to us.

Slide 17: Forum questions Please post your timed queries in this forum.
Slide 18: Acknowledgement Spoken Tutorial Project is funded by NMEICT, MHRD, Government of India.

More information on this mission is available at this link.

Slide 19: Thanks This is Praveen from IIT Bombay signing off.

Thank you for joining

Contributors and Content Editors

Nancyvarkey, Pravin1389

Retrieved from "https://script.spoken-tutorial.org/index.php?title=HTML/C2/Formatting-Tags-in-HTML/English&oldid=43151"